<template>
  <div class="container">
    <el-dialog title="题目预览" :visible="isPreviewShow" width="900px">
      <el-row>
        <el-col :span="6">
          <span v-if="questionItem.questionType === '1'">【题型】：单选题</span>
          <span v-else-if="questionItem.questionType === '2'">【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>
        </el-col>
        <el-col :span="6">
          <span> 【编号】：{{ questionItem.id }}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="questionItem.difficulty === '1'">【题型】：简单</span>
          <span v-else-if="questionItem.difficulty === '2'">【题型】：一般</span>
          <span v-else>【题型】：困难</span>
        </el-col>
        <el-col :span="6">
          <span> 【标签】：{{ questionItem.tags }}</span>
        </el-col>
      </el-row>
      <el-row class="text">
        <el-col :span="6">
          <span>【学科】：{{ questionItem.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ questionItem.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：{{ questionItem.direction }}</span>
        </el-col>
        <el-col :span="6"> </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col>
          <span>【题干】：</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="color: blue">
          <div v-html="questionItem.question"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>
            <span v-if="questionItem.questionType === '1'">单选题选项：（以下选中的选项为正确答案）</span>
            <span v-else-if="questionItem.questionType === '2'">多选题选项：（以下选中的选项为正确答案）</span>
          </span>
        </el-col>
      </el-row>
      <!-- 单选 -->
      <el-radio-group v-model="radio" v-if="questionItem.questionType === '1'" @change="change">
        <el-row v-for="(item, index) in questionItem.options" :key="index" style="margin: 10px 0px">
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
      <!-- 多选 -->
      <div v-if="questionItem.questionType === '2'">
        <el-row v-for="(item, index) in options" :key="index" style="margin: 10px 0px">
          <el-checkbox v-model="item.isRight" :disabled="item.isRight === 0" @change="testChange(item)">
            {{ item.title }}
          </el-checkbox>
        </el-row>
      </div>
      <hr />
      【参考答案】：<el-button type="danger" @click="isVideoShow = true">视频答案预览</el-button>
      <el-row style="margin-top: 20px" v-if="isVideoShow">
        <video :src="questionItem.videoURL" controls="controls" class="video"></video>
      </el-row>
      <hr />
      <el-row class="answer">
        <span>【答案解析】：无</span>
      </el-row>
      <hr />
      <el-row class="answer">
        <span>【题目备注】：无</span>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button center type="primary" @click="$emit('close')">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    questionItem: { type: Object, required: true },
    isPreviewShow: { type: Boolean, required: true }
  },
  data () {
    return {
      radio: 1,
      isVideoShow: false
    }
  },
  computed: {
    options () {
      // 先判断是不是多选题
      if (this.questionItem.questionType === '2') {
        if (!this.questionItem.options) {
          return // 如果没有题目选项停止后续操作
        }
        // 遍历传递过来的题目选项 如果isRight===1 代表该选项是被选中的选项
        this.questionItem.options.forEach((element) => {
          if (element.isRight === 1) {
            // 将这一项的isRight改为true 多选框就会默认选择
            element.isRight = true
          }
        })
        // 修改完成之后
        return this.questionItem.options
      } else {
        // 如果不是单选题 原路返回传递过来的题目项
        return this.questionItem.options
      }
    }
  },
  methods: {
    testChange (item) {
      if (item.isRight) {
        console.log(item.isRight)
      } else {
        item.isRight = true
      }
    },
    close () {
      this.$emit('close')
      this.isVideoShow = false
    },
    change () {
      this.radio = 1
    }
  }
}
</script>

<style scoped lang='less'>
.video {
  width: 400px;
}

.answer {
  padding: 8px 0;
}

.el-row {
  .el-col {
    span {
      font-size: 14px;
      color: #606266;
      line-height: 36px;
    }
  }
}
</style>
